<template>
  <div>
    <div class="header_ sele" :class="$store.state.wzfl==true?'cpfl_sele':''">
      <div class="add_qy"></div>
      <div>
        <div class="list_head">
          <div class="fl_right">
            <span>请选分类：</span>
            <a-input placeholder="请输入搜索的分类名称" style="width:200px;" @change="flchange" />

            <!-- <a-select
              showSearch
              title="请输入你要搜索的分类名称"
              placeholder="请输入搜索的分类名称"
              optionFilterProp="children"
              style="width: 200px;margin-right:10px;"
              @change="flchange"
              :filterOption="filterOption"
              :allowClear="true"
            >
              <a-select-option v-for="(item,i) in cpfllist" :key="i" :value="item">{{item}}</a-select-option>
            </a-select>-->
          </div>
        </div>
        <!-- <div class v-if="$store.state.tjwz">
          <tjcpym class="gl_tjym"></tjcpym>
        </div> -->
        <!-- <div class="gl_tjwz" v-if="$store.state.tgtk">
          <tgtk class="gl_tjym"></tgtk>
        </div>-->
        <div class="gl_tjwz" v-if="$store.state.cpscym">
          <cpscym class="gl_tjym"></cpscym>
        </div>
      </div>
    </div>
    <div class="cpfl" :class="$store.state.wzfl==true?'cpfl_box':''">
      <div class="glfltit" v-if="$store.state.wzfl">
        <h3>产品分类</h3>
        <a-icon @click="quxiao" type="close" />
      </div>
      <div :class="$store.state.wzfl==true?'gj_wzfl':''">
        <div :class="$store.state.wzfl==true?'addwzfl':''">
          <a-button type="primary" class="editable-add-btn" @click="addfl">添加分类</a-button>

          <a-tooltip>
            <template slot="title">注：提取库存表中产品分类</template>
            <a-button type="danger" class="editable-add-btn" @click="getclass">提取分类</a-button>
          </a-tooltip>
        </div>
        <div class="hydj" v-if="cpfltkflg">
          <cpfltk class="hydj_xgym"></cpfltk>
        </div>
        <a-table
          :dataSource="dataSource"
          @change="getcpfldatalist"
          :pagination="pagination"
          :columns="columns"
        >
          <template slot="proPic" slot-scope="text, record, index">
            <div>
              <img
                class="cpflimg"
                v-for="(item,i) in record.proPic"
                :key="i"
                :src="`https://image.bearing.cn/qy/member/imgcp/`+cpflsqdwid+'/'+item"
                alt
              />
            </div>
          </template>
          <template slot="show" slot-scope="text, record, index">
            <div>
              <a-switch
                :checked="record.isshow==0?true:false"
                @click="switchclick(record)"
                @change="switchChange"
              />
            </div>
          </template>
          <template slot="paixu" slot-scope="text, record">
            <!-- <span class="paixu" @click="()=>nodeUp(record.key, record)">
              <a-icon type="arrow-up" />
            </span>
            <span class="paixu" @click="()=>nodeDown(record.key, record)">
              <a-icon type="arrow-down" />
            </span>-->
            <div>
              <!-- <span :disabled="editingKey !== ''" @click="() => pxedit(record.key)">修改</span> -->
              <a-input-number
                id="inputNumber"
                v-model="record.sort"
                :min="0"
                :max="999999"
                @change="pxChange(record)"
              />
            </div>
          </template>
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span>
                <a
                  class="del"
                  v-if="record.key!=0||pagination.current!=1"
                  @click="() => top(record,record.key)"
                >置顶</a>
                <a
                  class="del"
                  v-if="record.key==0&&pagination.current==1"
                  @click="() => qxtop(record,record.key)"
                >取消置顶</a>
                <a class="del" @click="() => edit(record,record.key)">修改</a>
                <a-popconfirm
                  class="del"
                  title="确定删除吗?"
                  @confirm="() => onDelete(record,record.key)"
                >删除</a-popconfirm>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import cpfltk from "./cpfltk.vue";
// import tjcpym from "../tjcp/tjcpym.vue";
import { setTimeout } from "timers";
const dataSource = [];
const columns = [
  {
    title: "分类ID",
    dataIndex: "id_num",
    scopedSlots: { customRender: "id_num" }
  },
  {
    title: "分类名称",
    dataIndex: "proName",
    scopedSlots: { customRender: "proName" }
  },
  {
    title: "图片",
    dataIndex: "proPic",
    scopedSlots: { customRender: "proPic" }
  },
  // {
  //   title: "介绍",
  //   dataIndex: "proRemark",
  //   scopedSlots: { customRender: "proRemark" }
  // },
  {
    title: "排序",
    dataIndex: "paixu",
    scopedSlots: { customRender: "paixu" }
  },
  {
    title: "显示/隐藏",
    dataIndex: "show",
    scopedSlots: { customRender: "show" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
      dataSource,
      columns,
      count: 2,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      proName: "",
      proPic: "",
      proRemark: "",
      cpflsqdwid: "",
      listid: "",
      xgvalue: [],
      cpfltkflg: false,
      switchval: "",
      switchcheck: null,
      cpfllist: [],
      flcx: "",
      pxvalue: "",
      editingKey: ""
    };
  },
  components: {
    cpfltk,
    // tjcpym
  },
  methods: {
    //删除
    onDelete(value, key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
      this.axios
        .post(
          "kucun/ProClassListDelete.php",
          qs.stringify({
            id_num: value.id_num
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    //取消
    quxiao() {
      this.$store.state.wzfl = false;
    },
    //产品分类--列表
    getcpfldatalist(pagination) {
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "kucun/ProClassList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            sqdwid: this.$store.state.bbl_sqdwid,
            language: "0",
            proClass: 1,
            keywords: this.flcx
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.dataSource = res.data.result.data;
            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.data.length; i++) {
              this.dataSource[i].isshow = Number(
                res.data.result.data[i].isshow.trim()
              );

              this.dataSource[i].key = i;
              if (
                res.data.result.data[i].proPic != " " &&
                res.data.result.data[i].proPic != null
              ) {
                this.dataSource[i].proPic = res.data.result.data[
                  i
                ].proPic.split(",");
              }
              console.log(this.dataSource[i].isshow);
            }
          } else {
            this.dataSource = [];
          }
        });
    },

    //提取库存表中分类
    getclass() {
      this.axios
        .post(
          "kucun/getBrandClass.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            //2品牌1分类区分值
            proClass: 1
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
            this.getcpfldatalist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },

    // 节点上移
    // nodeUp(key, data) {
    //   this.axios
    //     .post(
    //       "kucun/ProClassUpSort.php",
    //       qs.stringify({
    //          id_num: data.id_num,
    //           language: 0,
    //           proClass: 1,
    //           sqdwid:this.$store.state.bbl_sqdwid

    //           })
    //     )
    //     .then(res => {
    //       if (res.data.code == 303) {
    //         this.$notification["success"]({
    //           message: "成功",
    //           description: res.data.msg,
    //           duration: 1.5
    //         });
    //         this.getcpfldatalist(this.pagination);
    //       } else {
    //         this.$notification["error"]({
    //           message: "失败",
    //           description: res.data.msg,
    //           duration: 1.5
    //         });
    //       }
    //     });
    // },

    // // 节点下移
    // nodeDown(index, data) {
    //   this.axios
    //     .post(
    //       "kucun/ProClassDownSort.php",
    //       qs.stringify({ id_num: data.id_num, language: 0, proClass: 1,sqdwid:this.$store.state.bbl_sqdwid })
    //     )
    //     .then(res => {
    //       if (res.data.code == 303) {
    //         this.$notification["success"]({
    //           message: "成功",
    //           description: res.data.msg,
    //           duration: 1.5
    //         });
    //         this.getcpfldatalist(this.pagination);
    //       } else {
    //         this.$notification["error"]({
    //           message: "失败",
    //           description: res.data.msg,
    //           duration: 1.5
    //         });
    //       }
    //     });
    // },
    pxChange(value) {
      console.log("changed", value);
      this.axios
        .post(
          "kucun/ProClassEditSort.php",
          qs.stringify({
            id_num: value.id_num,
            sort: value.sort
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
            // this.getcpfldatalist(this.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    // pxedit(key) {
    //   const newData = [...this.dataSource];
    //   const target = newData.filter(item => key === item.key)[0];
    //   this.editingKey = key;
    //   if (target) {
    //     target.editable = true;
    //     this.dataSource = newData;
    //   }
    // },
    //修改
    edit(value, key) {
      this.cpfltkflg = true;
      this.$store.state.xiugaiflag = "1";
      if (this.$store.state.xiugaiflag != "") {
        if (value.proPic != " " && value.proPic != "" && value.proPic != null) {
          value.proPic[0] = value.proPic[0].trim();
        }
        console.log(value);
        this.xgvalue = value.proPic;
        this.proName = value.proName;
        this.proRemark = value.proRemark;
        this.$store.state.content = value.proRemark;
        this.listid = value.id_num;
      }
    },
    //置顶
    top(value, key) {
      console.log(value);
      this.axios
        .post(
          "kucun/top.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            sort: value.sort,
            id_num: value.id_num,
            proClass: value.proClass
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg,
                duration: 1.5
              });
              this.getcpfldatalist(this.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg,
                duration: 1.5
              });
            }
          }
        });
    },
    //取消置顶
    qxtop(value, key) {
      console.log(value);
      this.axios
        .post(
          "kucun/topCancel.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            sort: value.sort,
            id_num: value.id_num,
            proClass: value.proClass
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg,
                duration: 1.5
              });
              this.getcpfldatalist(this.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg,
                duration: 1.5
              });
            }
          }
        });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //产品分类列表
    flchange(e) {
      this.flcx = e.target.value;
      this.pagination.current = 1;
      this.getcpfldatalist(this.pagination);
      // this.getfllist();
    },
    // fetchUser(value) {
    //   console.log(value)
    //   this.flcx = value;
    //   this.getcpfldatalist(this.pagination);
    //   // this.getfllist();
    // },
    switchclick(val) {
      console.log(val);
      var is_show;
      if (this.switchcheck) {
        is_show = 0;
      } else {
        is_show = -1;
      }
      this.switchval = val;
      this.axios
        .post(
          "kucun/ProClassListIsShow.php",
          qs.stringify({
            id_num: val.id_num,
            is_show: is_show
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.getcpfldatalist(this.pagination);

            this.$notification["success"]({
              message: "成功",
              description: res.data.msg,
              duration: 1.5
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg,
              duration: 1.5
            });
          }
        });
    },
    switchChange(checked) {
      this.switchcheck = checked;
      console.log(`a-switch to ${checked}`);
      // var is_show;
      // if (checked) {
      //   is_show = 0;
      // } else {
      //   is_show = -1;
      // }

      //  setTimeout(()=>{
      //     this.axios
      //     .post(
      //       "kucun/ProClassListIsShow.php",
      //       qs.stringify({
      //         id_num: this.switchval.id_num,
      //         is_show: is_show
      //       })
      //     )
      //     .then(res => {
      //       console.log(res);
      //        if (res.data.code == 303) {
      //         this.$notification["success"]({
      //           message: "成功",
      //           description: res.data.msg,
      //           duration: 1.5
      //         });
      //       } else {
      //         this.$notification["error"]({
      //           message: "失败",
      //           description: res.data.msg,
      //           duration: 1.5
      //         });
      //       }
      //     });
      //  },1000)
    },
    //添加分类
    addfl(value, key) {
      this.cpfltkflg = true;
      this.$store.state.xiugaiflag = "";
    },
    //分类列表
    getfllist() {
      this.axios
        .post(
          "kucun/SelectProList.php",
          qs.stringify({
            // pro: this.flcx,
            sqdwid: this.$store.state.bbl_sqdwid,
            num: 100
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.cpfllist = [];

            for (var i = 0; i < res.data.result.length; i++) {
              this.cpfllist.push(res.data.result[i].proName);
            }
          }
        });
    }
  },

  created() {
    this.cpflsqdwid = this.$store.state.bbl_sqdwid;
    this.getcpfldatalist(this.pagination);
    this.getfllist();
  }
};
</script>

<style lang='less'>
.cpfl_sele {
  left: 10px !important;
  width: 98% !important;
  top: -15px !important;
}
.cpfl_box {
  top: 71px !important;
  overflow-y: scroll !important;
  height: 674px !important;
}
@media (max-width: 1600px) {
.cpfl_box {
  height: 454px !important;

}


}
.cpfl {
  width: 98%;
  height: auto;
  position: relative;
  top: 70px;
  left: 1%;
  // box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
  text-align: left;
  background-color: #fff;
  .paixu {
    margin: 0 5px;
    cursor: pointer;
  }
  .cpflimg {
    width: 40px;
    height: 40px;
    margin: 0 5px;
  }
  .hydj {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1221px;
    background: rgba(0, 0, 0, 0);
    z-index: 999;
    height: 930px;
    .hydj_xgym {
      position: absolute;
      width: 80%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .gj_wzfl {
    padding: 0 20px;
  }
  .glfltit {
    width: 100%;
    height: 72px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    line-height: 20px !important;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: 18px;
    }
    .anticon-close {
      font-weight: normal;
      font-size: 22px;
    }
  }
  .addwzfl {
    display: flex;
    justify-content: space-between;
    .addwzfl_tit {
      font-size: 14px;
    }
  }
  .editable-add-btn {
    margin: 15px 20px;
  }
  .button {
    margin: 15px 0;
  }
  .editable-add-btn:hover {
    background-color: #1890ff;
    border: 0 !important;
    color: #fff !important;
  }
  .editable-cell {
    position: relative;
  }

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
  .ant-input {
    width: 70% !important;
  }
  .list_num {
    position: absolute;
    bottom: 60px;
    left: 25px;
    font-size: 15px;
  }
}
</style>
